<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- ====================================================================================================================
     jaxgames - coding standards
     ==================================================================================================================== -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>jaxgames - coding standards</title>
	<style type="text/css">
		body    {font: normal 13px/17px "Helvetica Neue", arial, helvetica, sans-serif; text-align: center;}
		#wrap   {width: 800px; text-align: justify; margin: 0 auto;}
		
		pre     {margin-right: 30px; background-color: #eee; padding: 5px; border: solid 1px #ddd; border-left-width: 8px;
		         font: normal 13px/15px Courier, "Courier New", monospace; color: #222; overflow: auto;}
		pre ins {background-color: #cfc; border-bottom: dotted 1px #080; text-decoration: none;}
		pre del {background-color: #fcc; border-bottom: dotted 1px #800; text-decoration: none;}
		pre .k  {color: #008;}
		pre .c  {color: #080;}
		pre .o  {color: #800;}
		
		tt {color: 222; background-color: #eee; padding: 0 2px 0 2px;}
		
		acronym[title="et cetera"] {font-family: serif; border-bottom: none;}
	</style>
</head>
<body><div id="wrap">
	<h1>Javascript</h1>
	<h2>Tabs &amp; Width</h2>
	<ul>
		<li>Tab size is <strong>8 spaces</strong> (not tab characters)</li>
		<li>The width of the page is 125 characters</li>
	</ul>
	<p>
		When you View Source in Firefox, 125/8 is the sizes used to display the code (1024x768). Using these sizes
		makes for good space, promotes less indenting, and views equally in Firefox.
	</p>
	<!-- ============================================================================================================ -->
	<h2>Operators</h2>
	<ul>
		<li>
			<em>Do</em> place a space between operators<br />
			<pre>i<ins> </ins><span class="o">++</span>;<br />a<ins> </ins><span class="o">=</span><ins> </ins>b<ins> </ins><span class="o">+</span><ins> </ins>(c<ins> </ins><span class="o">-</span><ins> </ins>d);</pre>
			
			<em>Except</em> for operators used in a parameter, or the operators in a <tt>for</tt> statement<br />
			<pre>f (a, b<ins class="o">+</ins>c, d);<br /><span class="k">for</span> (<span class="k">var</span> i<ins class="o">=</ins>0; i<ins class="o">&lt;</ins>10; i<ins class="o">++</ins>) {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="c">//statements...</span><br />}</pre>
		</li><li>
			<tt>if</tt> and <tt>switch</tt> are not considered functions and therefore spaces <em>must</em> be
			included between operators<br />(excluding operators used in the parameters of a function, used in an
			<tt>if</tt> or <tt>switch</tt> statement)<br />
			<pre><span class="k">if</span> (a<ins> </ins><span class="o">==</span><ins> </ins>b) {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="c">//statements&hellip;</span><br />}</pre>
		</li>
	</ul>
	<!-- ============================================================================================================ -->
	<h2>Functions</h2>
	<ul>
		<li>
			<em>Do</em> place a space between functions and their parameters &amp; the parameters and the opening
			brace.<br />Note also that the opening brace <em>should</em> be on the same line as the function
			statement<br />
			<pre><span class="k">function</span> f<ins> </ins>(a, b, c)<ins> </ins>{<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="c">//statements...</span><br />}</pre>
			
			<em>Except</em> for functions that are parameters to another function (e.g. Prototype&rsquo;s <tt>each</tt> function)<br />
			<pre>f (a, b, <ins><span class="k">function</span>(</ins>x<ins>){</ins><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="c">//statements...</span><br />});</pre>
			
			Also, <em>except</em> for Prototype utility functions:<br />
			<pre><ins>$(</ins>"element");<br /><ins>$F(</ins>"form-element");<br /><ins>$H(</ins>['a', 'b', 'c']);</pre>
		</li><li>
			All function names <em>must</em> be camel case with the first letter lower<br />
			<pre><span class="k">function</span> <ins>myFunctionWithAName</ins> () {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="c">//statements...</span><br />}</pre>
		</li>
	</ul>
	<!-- ============================================================================================================ -->
	<h2>Parameters</h2>
	<ul>
		<li>
			<em>Do</em> place a space after the comma for each parameter<br />
			<pre><span class="k">function</span> f (a<ins>, </ins>b<ins>, </ins>c) {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="c">//statements...</span><br />}</pre>
			
			<em>Except</em> for parameters to a function, that is itself a parameter (e.g. Prototype&rsquo;s <tt>each</tt> function)<br />
			<pre>f (a, b, <span class="k">function</span>(x<ins>,</ins>y<ins>,</ins>z){<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="c">//statements...</span><br />});</pre>
		</li><li>
			Parameter names <em>must</em> state their intended type using a prefix as listed below.<br />
			<pre><span class="k">function</span> f (<ins>s_</ins>variable,&nbsp;&nbsp;<span class="c">//string</span><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ins>n_</ins>variable,&nbsp;&nbsp;<span class="c">//number</span><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ins>a_</ins>variable,&nbsp;&nbsp;<span class="c">//array, e.g. ['a', 'b', 'c']</span><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ins>o_</ins>variable,&nbsp;&nbsp;<span class="c">//object literal, e.g. {suit: 'Spades', value: 8}</span><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ins>f_</ins>function&nbsp;&nbsp;&nbsp;<span class="c">//function (when you pass a function as a parameter, e.g. Prototype&rsquo;s &lsquo;each&rsquo; function)</span><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ins>x_</ins>variable,&nbsp;&nbsp;<span class="c">//for parameters that can be of any type</span><br />) {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="c">//statements...</span><br />}</pre>
		</li><li>
			Parameter names <em>must</em> be all lower case, without any underscores, (excluding the one
			underscore used to define the type), <em>except</em> for parameters that are functions, which
			use camelCase<br />
			<pre><span class="k">function</span> f (s_<ins>mystring</ins>&nbsp;&nbsp;&nbsp;&nbsp;<span class="c">//correct</span><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;s_<del>my_string</del>,&nbsp;&nbsp;<span class="c">//no underscores in variable name (excluding the prefix)</span><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;s_<del>myString</del>,&nbsp;&nbsp;&nbsp;<span class="c">//no camelcase,</span><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;f_<ins>myFunction</ins>&nbsp;&nbsp;<span class="c">//except for functions as parameters</span><br />) {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="c">//statements...</span><br />}</pre>
		</li>
	</ul>
	<!-- ============================================================================================================ -->
	<h2>Variables</h2>
	<ul>
		<li>
			All variables <em>must</em> be defined with <tt>var</tt>.<br />
			Internet Explorer will generate errors in certain cases of variables not being implicitly defined
			<br />
			
			<pre><span class="k"><ins>var</ins></span> r <span class="o">=</span> f (a, b, c);<br /><span class="k">for</span> (<span class="k"><ins>var</ins></span> i<span class="o">=</span>0; i<span class="o">&lt;</span>10; i<span class="o">++</span>) {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="c">//statements...</span><br />}</pre>
		</li><li>
			All variables <em>must</em> be lower case with underscores for word boundaries<br />
			<pre><span class="k">var</span> <ins>the_meaning_of_life</ins> <span class="o">=</span> 42;</pre>
		</li><li>
			Multiple variables <em>must</em> be defined in block layout, with each additional variable indented
			four spaces.<br />
			
			The terminator appears on its own line. You <em>should</em> align the equal signs where practical.
			This is done for code readability, as well as smaller file size when the javascript is compressed
			<br />
			
			<pre><span class="k">var</span> suit <ins> </ins><span class="o">=</span> "Spades",<br /><ins>&nbsp;&nbsp;&nbsp;&nbsp;</ins>face <ins> </ins><span class="o">=</span> "A",<br /><ins>&nbsp;&nbsp;&nbsp;&nbsp;</ins>value <span class="o">=</span> 1<br /><ins>;</ins></pre>
		</li>
	</ul>
	<!-- ============================================================================================================ -->
	<h2>Comments</h2>
	<ul>
		<li>
			Comments <em>must</em> always be lower case, <em>except</em> for important references referring to
			function/object names in the code <acronym title="et cetera">&amp;c.</acronym>,or other important nouns<br />
			<pre><ins class="c">//if the chosen card is an Ace, Eight or Joker</ins><br /><span class="k">return</span> (value <span class="o">==</span> 1 <span class="o">||</span> value <span class="o">==</span> 8 <span class="o">||</span> value <span class="o">==</span> 11);</pre>
		</li><li>
			Comments <em>must not</em> terminate in a full stop. full stops in the middle are allowed<br />
			<pre>f (a, b, c);  <span class="c">//call f with a and b<ins>.</ins> note that c might be null<del>.</del></span></pre>
		</li><li>
			A comment on the same line as a statement <em>must</em> be at least two spaces apart<br />
			<pre>i<span class="o">++</span>;<ins>  </ins><span class="c">//add one to i</span></pre>
		</li><li>
			References to actual code / objects / function names in comments <em>must</em> always be encapsulated in back-ticks<br />
			<pre><span class="c">//<ins>`</ins>Insertion.Bottom<ins>`</ins> is used (instead of <ins>`</ins>.innerHTML+=<ins>`</ins>) so that<br />//multiple messages coming in at the same time don't overwrite each other</span><br /><span class="k">new</span> Insertion.Bottom (e, html);</pre>
		</li>
	</ul>
<div></body><!-- === end of line ================================================================================= --></html>